<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
        .selectActive {
            background-color: #FADDCF !important;
            color: #EB7B3D;

        }
    </style>
</head>
<body>
<div id="app">
    <div id="blank" class="header">
        <div v-back.tapmode class="back small"></div>
        <span class="title" style="margin-left: 36px;">总收益明细</span>
        <img src="../../image/big/screen_image1.png" width="20px" height="20px"
             style="float: right;margin-top: 16px;margin-right: 10px;" v-myclick="isShow"/>
    </div>
    <div class="modal-income-filter" style="top:60px; " :class="selectModal" v-myclick.stop="cancelModal" v-cloak>
        <div class="modal-income-alert">
            <div class="income-type">
                <div class="type-title">收益状态</div>
                <div class="type-button">
                    <a v-myclick="[0, selectState]" :class="{'selectActive': 0==from_state}"><span>&nbsp;全部&nbsp;</span><img
                            v-show="from_state==0" v-src="'../../image/gross_select1.png'"/></a>
                    <a v-myclick="[2, selectState]" :class="{'selectActive': 2==from_state}"><span>已结算</span><img
                            v-show="from_state==2" v-src="'../../image/gross_select1.png'"/></a>
                    <a v-myclick="[1, selectState]" :class="{'selectActive': 1==from_state}"><span>待结算</span><img
                            v-show="from_state==1" v-src="'../../image/gross_select1.png'"/></a>
                    <a v-myclick="[3, selectState]" :class="{'selectActive': 3==from_state}"><span>不可提现</span><img
                            v-show="from_state==3" v-src="'../../image/gross_select1.png'"/></a>
                </div>
            </div>
            <div class="income-type">
                <div class="type-title">日期选择</div>
                <div class="date-select">
                    <div class="date-background">
                        <input type="text" v-myclick="[1, openPicker]" readonly style="margin-left: 10px;float: left ;"
                               v-model="value1"/>
                        <div class="line"><span></span></div>
                        <input type="text" v-myclick="[2, openPicker]" readonly style="margin-right: 10px;float: right"
                               v-model="value2"/>
                    </div>
                </div>
            </div>
            <div class="op-button">
                <a class="reset" v-myclick="clearModal">重置</a>
                <a class="finish" v-myclick="selectFinish">完成</a>
            </div>
        </div>
    </div>
    <div class="main-container" v-cloak>
        <div class="row-container" style="margin-top:0px">
            <div class="income_tab">
                <div class="tab-one" v-myclick="[1, changeBottom]">
                    <span :class="{'active':isActive==1}">推广奖励</span>
                </div>
                <div class="tab-one" v-myclick="[2, changeBottom]">
                    <span :class="{'active':isActive==2}">消费收益</span>
                </div>
                <div class="tab-one" v-myclick="[3, changeBottom]">
                    <span :class="{'active':isActive==3}">其他收益</span>
                </div>

            </div>
            <div style="background: #f7f7f7" v-if="myProfit.length==0">
                <div style="text-align:center;padding-top: 60px;">
                    <div style="text-align:center;padding-top: 70px;">
                        <img v-src="'../../image/not_available.png'" width="70px" height="70px"/>
                        <div style="padding-top:10px ">
                            <span>没找到您要的</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-row" v-for="item in myProfit" v-if="myProfit.length>0"
                 v-open-win.tapmode="{type:item.type,id:item.id}" vurl="income_detail" >
                <div class="one-row">
                    <span style="float: left">{{typeSelect}}</span>
                    <span style="color:#808080;font-size: 12px;float: right">{{item.date_add | date}}</span>
                </div>
                <div class="one-row">
                    <span style="float: left">收益：{{item.profit}}</span>
                    <span style="color:red;float: right">{{item.state | state}}</span>
                </div>
            </div>
        </div>
        <lazy-load
                v-if="myProfit.length > 0"
                count-per-page="20"
                :arr="myProfit"
                :url="url"
                :other-datas="params"
        >
        </lazy-load>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script>
    var vm, state, from_state;

    var myProfit;
    apiready = function () {
        setBSImg();
        var param = api.pageParam;
        var data = {
            member_id: getPrefs('member_id'),
            type: 1,
            state: param.keyState,
        };
        state = param.keyState;
        from_state = param.keyState;
        var callback = function (ret) {
            myProfit = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.myProfitList, data, callback);
        addListeners();
    };
    Vue.filter("state", function (state) {
        if (state == 1)
            return "未结算";
        if (state == 2)
            return "已结算";
        if (state == 3)
            return "已失效";
    });
    function initApp() {
        vm = new Vue({
            el: "#app",
            data: {
                page: 1,
                busy: false,
                isActive: 1,
                showModal: false,
                value1: '',
                value2: '',
                isAll: false,
                myProfit: myProfit,
                from_type: 99,
                from_state: from_state,
                type: 1,
                state: state,
                url: URL.myProfitList,
            },
            computed: {
                typeSelect:function () {
                    switch (this.type) {
                        case 1:
                            return '推广奖励';
                        case 2:
                            return '消费收益';
                        case 3:
                            return '其他收益';
                    }
                },
                min_time:function () {
                    return this.value1 ? new Date(this.value1).getTime() / 1000 : '';
                },
                max_time:function () {
                    return this.value2 ? new Date(this.value2).getTime() / 1000 : '';
                },
                params:function () {
                    return {
                        type:this.type,
                        state:this.state,
                        min_time:this.min_time,
                        max_time:this.max_time,
                    }
                },
                selectModal: function () {
                    return {
                        show: this.showModal,
                        hide: !this.showModal
                    }
                },
            },
            methods: {
                selectState: function (index) {
                    if (index == this.from_state) {
                        this.from_state = 99;
                        this.state = "";
                    } else {
                        if (index == 0) {
                            this.from_state = 0;
                            this.state = "";
                        } else if (index == 1) {
                            this.from_state = 1;
                            this.state = 1;
                        } else if (index == 2) {
                            this.from_state = 2;
                            this.state = 2;
                        } else if (index == 3) {
                            this.from_state = 3;
                            this.state = 3;
                        }
                    }

                },
                openPicker: function (val) {
                    var myDate = new Date();
                    var month = myDate.getMonth() + 1;
                    var dateTime = myDate.getFullYear() + '-' + month + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes();
                    api.openPicker({
                        type: 'date',
                        date: dateTime,
                        title: '选择时间'
                    }, function (ret, err) {
                        if (ret) {
                            if (val == 1) {
                                vm.value1 = ret.year + '/' + ret.month + '/' + ret.day;
                            }
                            if (val == 2) {
                                vm.value2 = ret.year + '/' + ret.month + '/' + ret.day;
                            }

                        } else {
                            pinet.alert(JSON.stringify(err));
                        }
                    });

                },
                clearModal: function () {
                    this.state = '';
                    this.from_state = 99;
                    this.value1 = '';
                    this.value2 = '';
                },
                selectFinish: function () {
                    var data = {
                        member_id: getPrefs('member_id'),
                        page:1,
                    };
                    concatJson(data, this.params);
                    var callback = function (ret) {
                        vm.myProfit = ret.content;
                        vm.page = 1;
                        window.scrollTo(0, 0);
                    };
                    this.showModal = false;
                    pinet.post(URL.myProfitList, data, callback);
                },
                isShow: function () {
                    this.showModal = !this.showModal;
                },
                changeBottom: function (index) {
                    showProgress();
                    this.myProfit = '';
                    this.isActive = index;
                    this.type = index;

                    var data = {
                        member_id: getPrefs('member_id'),
                        page: 1,
                    };
                    concatJson(data, this.params);
                    var callback = function (ret) {
                        vm.myProfit = ret.content;
                        vm.page = 1;
                    };
                    pinet.post(URL.myProfitList, data, callback);

                },
                cancelModal: function () {
                    this.showModal = false;
                }
            },
        });
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
